<template>
  <el-dialog
    :title="form.id ? '编辑' : '新增'"
    v-model="visible"
    :close-on-click-modal="false"
    draggable
  >
    <el-form
      ref="dataFormRef"
      :model="form"
      :rules="dataRules"
      formDialogRef
      v-loading="loading"
      label-width="120px"
    >
      <el-row :gutter="24">
        <el-col :span="12" class="mb20">
          <el-form-item label="合同编号" prop="htbh">
            <el-input v-model="form.htbh" placeholder="请输入合同编号" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="签订日期" prop="jdrq">
            <el-input v-model="form.jdrq" placeholder="请输入签订日期" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-tabs class="demo-tabs" type="border-card" v-model="activeName">
        <el-tab-pane label="基础权属信息" name="first">
          <template #label>
            <span class="label-title">基础权属信息</span>
          </template>
          <div style="font-weight:bold;"><span>1、出让方</span></div>
          <el-row :gutter="24">
            <el-col :span="24" class="mb20">
              <el-form-item label="姓名/名称" prop="crfXm">
                <el-input v-model="form.crfXm" placeholder="请输入出让方姓名/名称" />
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20">
              <el-form-item label="身份证号/统一信用代码" prop="crfZjhm" label-width="170px" >
                <el-input
                  v-model="form.crfZjhm"
                  placeholder="请输入出让方身份证号/统一信用代码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20">
              <el-form-item label="原林权证号" prop="crfYlqzh">
                <el-input v-model="form.crfYlqzh" placeholder="请输入出让方原林权证号" />
              </el-form-item>
            </el-col>
          </el-row>
          <div style="font-weight:bold;"><span>2、受让方</span></div>
          <el-row :gutter="24">
            <el-col :span="24" class="mb20">
              <el-form-item label="姓名/名称" prop="srfXm">
                <el-input v-model="form.srfXm" placeholder="请输入受让方姓名/名称" />
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20">
              <el-form-item label="身份证号/统一信用代码" prop="srfZjhm" label-width="170px">
                <el-input
                  v-model="form.srfZjhm"
                  placeholder="请输入受让方身份证号/统一信用代码"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div style="font-weight:bold;"><span>3、标的物信息</span></div>
          <el-row :gutter="24">
            <el-col :span="24" class="mb20">
              <el-form-item label="宗地位置" prop="zdwzS">
                <el-input
                  v-model="form.zdwzS"
                  placeholder="请输入宗地位置省"
                  style="width: 18%"
                />
                <el-input
                  v-model="form.zdwzX"
                  placeholder="请输入宗地位置县"
                  style="width: 18%"
                />
                <el-input
                  v-model="form.zdwzXz"
                  placeholder="请输入宗地位置乡镇/街道"
                  style="width: 18%"
                />
                <el-input
                  v-model="form.zdwzC"
                  placeholder="请输入宗地位置村"
                  style="width: 18%"
                />
                <el-input
                  v-model="form.zdwzXdm"
                  placeholder="请输入宗地位置小地名"
                  style="width: 18%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20">
              <el-form-item label="宗地代码" prop="zddm">
                <el-input v-model="form.zddm" placeholder="请输入宗地代码" />
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20">
              <el-form-item label="面积（亩）" prop="mj">
                <el-input-number
                  :min="1"
                  :max="1000"
                  v-model="form.mj"
                  placeholder="请输入面积"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20">
              <el-form-item label="林种" prop="lz">
                <el-radio-group v-model="form.lz">
                  <el-radio
                    :label="item.value"
                    v-for="(item, index) in forest_category"
                    
                    :key="index"
                    >{{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="流转约定" name="second">
          <template #label>
            <span class="label-title">流转约定</span>
          </template>
          <el-row :gutter="24">
            <el-col :span="24" class="mb20">
              <el-form-item label="权利类型" prop="qllx">
                <el-radio-group v-model="form.qllx">
                  <el-radio
                    :label="item.value"
                    v-for="(item, index) in rights_type"
                    
                    :key="index"
                    >{{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20" v-if="form.qllx == '2'">
              <el-form-item label="出租期限" prop="ccqx">
                <el-input-number
                  :min="1"
                  :max="1000"
                  v-model="form.ccqx"
                  placeholder="请输入出租期限"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20">
              <el-form-item label="流转方式" prop="lcfs">
                <el-radio-group v-model="form.lcfs">
                  <el-radio
                    :label="item.value"
                    v-for="(item, index) in transfer_way"
                    
                    :key="index"
                    >{{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- <div slot="header"><span> 3、流转价款</span></div> -->
            <el-col :span="24" class="mb20">
              <el-form-item label="流转总金额（元）" prop="lczje" label-width="140px">
                <el-input-number
                  :min="1"
                  :max="1000"
                  v-model="form.lczje"
                  placeholder="请输入流转总金额"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20">
              <el-form-item label="支付方式" prop="zffs">
                <el-radio-group v-model="form.zffs">
                  <el-radio
                    :label="item.value"
                    v-for="(item, index) in payment_way"
                    
                    :key="index"
                    >{{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="特别条款" name="third">
          <template #label>
            <span class="label-title">特别条款</span>
          </template>
          <el-row :gutter="24">
            <el-col :span="24" class="mb20">
              <el-form-item label="生态保护义务" prop="stbhyw">
                <el-input
                  type="textarea"
                  v-model="form.stbhyw"
                  placeholder="请输入生态保护义务"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="仲裁单位" prop="zcdw">
                <el-input v-model="form.zcdw" placeholder="请输入仲裁单位" />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="诉讼单位" prop="ssdw">
                <el-input v-model="form.ssdw" placeholder="请输入诉讼单位" />
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mb20">
              <el-form-item label="监督条款" prop="jdtk">
                <el-input
                  type="textarea"
                  v-model="form.jdtk"
                  placeholder="请输入监督条款"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="loading">确 认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="TransferForestContractDialog">
// ========== 1. 导入语句 ==========
import { useDict } from "/@/hooks/dict";
import { rule } from "/@/utils/validate";
import { useMessage } from "/@/hooks/message";
import {
  getObj,
  addObj,
  putObj,
  validateExist,
} from "/@/api/forestry/transferForestContract";

// ========== 2. 组件定义 ==========
// 定义组件事件
const emit = defineEmits(["refresh"]);

// ========== 3. 响应式数据定义 ==========
// 基础响应式变量
const dataFormRef = ref(); // 表单引用
const visible = ref(false); // 弹窗显示状态
const loading = ref(false); // 加载状态
const activeName = ref("first");
// 表单数据对象
const form = reactive({
  id: "", // 主键
  htbh: "", // 合同编号
  jdrq: "", // 签订日期
  crfXm: "", // 出让方姓名/名称
  crfZjhm: "", // 出让方身份证号/统一信用代码
  crfYlqzh: "", // 出让方原林权证号
  srfXm: "", // 受让方姓名/名称
  srfZjhm: "", // 受让方身份证号/统一信用代码
  zdwzS: "", // 宗地位置省
  zdwzX: "", // 宗地位置县
  zdwzXz: "", // 宗地位置乡镇/街道
  zdwzC: "", // 宗地位置村
  zdwzXdm: "", // 宗地位置小地名
  zddm: "", // 宗地代码
  mj: 0, // 面积
  lz: "", // 林种
  qllx: "", // 权利类型
  ccqx: 0, // 出租期限
  lcfs: "", // 流转方式
  lczje: 0, // 流转总金额
  zffs: "", // 支付方式
  stbhyw: "", // 生态保护义务
  zcdw: "", // 仲裁单位
  ssdw: "", // 诉讼单位
  jdtk: "", // 监督条款
});

// ========== 4. 字典数据处理 ==========
// 加载字典数据
const { forest_category, payment_way, rights_type, transfer_way } = useDict(
  "forest_category",
  "payment_way",
  "rights_type",
  "transfer_way"
);

// ========== 5. 表单校验规则 ==========
const dataRules = ref({
  htbh: [{ required: true, message: "合同编号不能为空", trigger: "blur" }],
  jdrq: [{ required: true, message: "签订日期不能为空", trigger: "blur" }],
  crfXm: [{ required: true, message: "出让方姓名/名称不能为空", trigger: "blur" }],
  crfZjhm: [
    { required: true, message: "出让方身份证号/统一信用代码不能为空", trigger: "blur" },
  ],
  crfYlqzh: [{ required: true, message: "出让方原林权证号不能为空", trigger: "blur" }],
  srfXm: [{ required: true, message: "受让方姓名/名称不能为空", trigger: "blur" }],
  srfZjhm: [
    { required: true, message: "受让方身份证号/统一信用代码不能为空", trigger: "blur" },
  ],
  zdwzS: [{ required: true, message: "宗地位置省不能为空", trigger: "blur" }],
  zdwzX: [{ required: true, message: "宗地位置县不能为空", trigger: "blur" }],
  zdwzXz: [{ required: true, message: "宗地位置乡镇/街道不能为空", trigger: "blur" }],
  zdwzC: [{ required: true, message: "宗地位置村不能为空", trigger: "blur" }],
  zdwzXdm: [{ required: true, message: "宗地位置小地名不能为空", trigger: "blur" }],
  zddm: [{ required: true, message: "宗地代码不能为空", trigger: "blur" }],
  mj: [{ required: true, message: "面积不能为空", trigger: "blur" }],
  lz: [{ required: true, message: "林种不能为空", trigger: "blur" }],
  qllx: [{ required: true, message: "权利类型不能为空", trigger: "blur" }],
  lcfs: [{ required: true, message: "流转方式不能为空", trigger: "blur" }],
  lczje: [{ required: true, message: "流转总金额不能为空", trigger: "blur" }],
  zffs: [{ required: true, message: "支付方式不能为空", trigger: "blur" }],
  stbhyw: [{ required: true, message: "生态保护义务不能为空", trigger: "blur" }],
  zcdw: [{ required: true, message: "仲裁单位不能为空", trigger: "blur" }],
  ssdw: [{ required: true, message: "诉讼单位不能为空", trigger: "blur" }],
  jdtk: [{ required: true, message: "监督条款不能为空", trigger: "blur" }],
});

// ========== 6. 方法定义 ==========
// 获取详情数据
const getTransferForestContractData = async (id: string) => {
  try {
    loading.value = true;
    const { data } = await getObj({ id: id });
    // 直接将第一条数据赋值给表单
    Object.assign(form, data[0]);
  } catch (error) {
    useMessage().error("获取数据失败");
  } finally {
    loading.value = false;
  }
};

// 打开弹窗方法
const openDialog = (id: string) => {
  visible.value = true;
  form.id = "";

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  // 获取TransferForestContract信息
  if (id) {
    form.id = id;
    getTransferForestContractData(id);
  }
};

// 提交表单方法
const onSubmit = async () => {
  loading.value = true; // 防止重复提交

  // 表单校验
  const valid = await dataFormRef.value.validate().catch(() => {});
  if (!valid) {
    loading.value = false;
    return false;
  }

  try {
    // 根据是否有ID判断是新增还是修改
    form.id ? await putObj(form) : await addObj(form);
    useMessage().success(form.id ? "修改成功" : "添加成功");
    visible.value = false;
    emit("refresh"); // 通知父组件刷新列表
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};

// ========== 7. 对外暴露 ==========
// 暴露方法给父组件
defineExpose({
  openDialog,
});
</script>
<style scoped lang="scss"> 
.label-title::before{
  content: "*";
  color: var(--el-color-danger);
  margin-right: 4px;
}
</style>